<template>
  <div
    :class="{ 'footer--checkbox': true, active: state.isActive }"
    @click="onClick"
  >
    <span
      :class="{ 'footer--checkbox-icon': true, [`${icon}`]: !!icon }"
    ></span>
    <span>
      <slot></slot>
    </span>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';
export default {
  name: 'BottomCheckbox',
  props: {
    icon: {
      type: String,
      default: 'sha',
    },
    modelValue: Boolean,
  },
  setup(props) {
    const state = reactive({
      isActive: !!props.modelValue,
      throttleTime: 0,
      throttleTimeout: 1000,
    });

    watch(
      () => props.modelValue,
      (newVal, oldVal) => {
        state.isActive = !!newVal;
      }
    );

    return {
      state,
    };
  },
  methods: {
    onClick() {
      if (Date.now() - this.state.throttleTime < this.state.throttleTimeout)
        return;
      this.state.isActive = this.state.isActive ? false : true;
      this.state.throttleTime = Date.now();
      this.$emit('update:modelValue', this.state.isActive);
    },
  },
};
</script>